<template>
  <div class="top-aside">
    <div class="top-aside-box">
      <ul class="top-aside-ul">
        <router-link tag="li" class="top-aside-li" :to="{name:item.name}" v-for="(item,index) in aside" :key="index">
          <div>{{item.title}}</div>
        </router-link>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'AsideMenu',
  props: {
    aside: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data() {
    return {
      dis: false,
      changenum: 1
    };
  },
  created() {

  },
  methods: {},
};
</script>

<style lang="less" scoped>
  .top-aside {
    padding: 5px 15px 0;

    .top-aside-box {
      width: 100%;
      height: 40px;

      .top-aside-ul {
        display: flex;
        align-items: center;

        .top-aside-li {
          height: 40px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #32405a;
          border-radius: 4px;
          padding: 0 15px;
          cursor: pointer;
          color: #ffffff;
          transition: all 0.3s;

          & + .top-aside-li {
            margin-left: 10px;
          }

          &:hover {
            background-color: #BAD7FF;
            color: #333;
          }

          &.on {
            background-color: #BAD7FF;
            color: #333;
          }
        }
      }
    }
  }
</style>>

